<template>
  <div>
    <!-- 入职 -->
    <div>
      
    </div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">用户管理</div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="用户名">
        <el-input
          v-model="queryParams.accountName"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchAccounts"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="accounts"
      height="590"
    >
      <el-table-column
        prop="accountId"
        label="用户编号"
      >
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="用户名称"
      >
      </el-table-column>
      <el-table-column
        prop="signature"
        label="用户签名"
      >
      </el-table-column>
      <el-table-column
        prop="accountLevel"
        label="用户等级"
      >
      </el-table-column>
      <el-table-column
        prop="accountPosition"
        label="用户职位"
      >
      </el-table-column>
      <el-table-column
        prop="registerTime"
        label="注册时间"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="grantHandle(scope.row)"
          >授予</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
    >
    </el-pagination>
    <el-dialog
      title="授权"
      :visible.sync="grantWindowKey"
      width="70%">
      <el-transfer :titles="['全部角色', '我的角色']" v-model="currentRoles" :data="allRoles"></el-transfer>
      <div style="margin-top: 20px;">
        <el-button type="primary" @click="grantAccountRoles">确定</el-button>
        <el-button @click="grantWindowKey = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryAccounts, queryAccountRoles, grantToUser } from '@/api/system/system';
export default {
  data() {
    return {
      grantWindowKey: false,
      allRoles: [],
      currentRoles: [],
      accounts: [],
      queryParams: {
          accountName: '',
          current: 0,
          pageSize: 10
      },
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      currentAccount: {}
    }
  },
  async mounted() {
    this.initSearchAccounts()
  },
  computed: {
  },
  methods: {
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageData.current = current
      this.searchAccounts()
    },
    async grantHandle(row) {
      // 当前用户
      this.currentAccount = {...row}
      // 请求当前角色
      const {data: accountRoles} = await queryAccountRoles(row.accountId)
      if (accountRoles.code === 200) {
        let accountRole =  accountRoles.data.accountRole
        const currentRoles = accountRole.currentRoles
        const allRoles = accountRole.allRoles
        this.currentRoles = []
        currentRoles.forEach(item => {
            this.currentRoles.push(item.roleId)
        })
        this.allRoles = []
        allRoles.forEach(role => {
            this.allRoles.push({
                key: role.roleId,
                label: role.roleName
            })
        })
        this.grantWindowKey = true
      }
    },
    initSearchAccounts() {
      this.pageData.current = 1
      this.pageData.pageSize = 10
      this.searchAccounts()
    },
    async searchAccounts() {
      this.queryParams.current = this.pageData.current
      this.queryParams.pageSize = this.pageData.pageSize
      const {data: res} = await queryAccounts(this.queryParams)
      if (res.code === 200) {
        this.accounts = res.data.accounts.records
        this.pageData.total = res.data.accounts.total
      }
    },
    async grantAccountRoles() {
      let grant = {}
      grant.relationId = this.currentAccount.accountId
      grant.relations = this.currentRoles
      console.log(grant)
      const {data: res} = await grantToUser(grant)
      if (res.code === 200) {
        this.$message.success('授权成功')
      }
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.grantWindowKey = false
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>